<template>
  <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-width="100px"
      class="add-admin-form"
  >
    <el-form-item label="状态">
      <el-select
          v-model="form.status"
          placeholder="状态"
          clearable
      >
        <el-option v-for="(txt, index) in statuslist" :key="index" :label="txt" :value="Number(index)" />
      </el-select>
    </el-form-item>

    <el-form-item v-show="form.status==-1" v-model="form.notes" label-width="100px" class="add-admin-form" label="拒绝原因">
      <el-input
          type="textarea"
          :rows="2"
          placeholder="请输入拒绝原因"
          v-model="form.notes" clearable>
      </el-input>
    </el-form-item>

  </el-form>
</template>

<script setup>
import { ref, reactive, watch } from 'vue';
import { ElMessage } from 'element-plus';
const props = defineProps({
  formData: {
    type: Object,
    default: () => null
  },
  statuslist:{}
});
const formRef = ref(null);
const form = reactive({
  status: 0
});
// 监听formData变化，更新表单数据
watch(() => props.formData, (newVal) => {
  if (newVal) {
    Object.assign(form, newVal);
  }
}, { immediate: true });

// 重置表单
const resetForm = () => {
  if (formRef.value) {
    formRef.value.resetFields();
  }
  Object.assign(form, {
    name: '',
    sort: 0,
    notes:'',
    status: 1
  });
};

// 验证规则
const rules = {
  status: [
    { required: true, message: '请选择状态', trigger: 'change' }
  ]
};

const validateForm = async () => {
  try {
    await formRef.value.validate();
    return true;
  } catch (error) {
    ElMessage.error('请检查表单填写是否正确');
    return false;
  }
};

defineExpose({
  formRef,
  form,
  validateForm,
  resetForm
});
</script>

<style scoped>
.add-admin-form {
  padding: 20px;
}
</style>
